<script setup lang="ts">
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
let headWidth = document.body.offsetWidth;
//----------------------------------------------------------
const labelText = ref("桌面电脑");

//----------------------------------------------------------

onMounted(() => {
  headWidth = window.innerWidth;
  if (headWidth < 768) {
    labelText.value = "手机-" + headWidth;
  } else if (headWidth < 1024) {
    labelText.value = "平板-" + headWidth;
  } else if (headWidth < 1440) {
    labelText.value = "折叠机-" + headWidth;
  } else {
    labelText.value = "桌面电脑-" + headWidth;
  }
  console.log("宽度[onMounted]----" + headWidth);
  window.addEventListener("resize", resizeListener);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});

onUpdated(() => {
  headWidth = window.innerWidth;
  console.log("宽度[onUpdated]----" + headWidth);
});

function resizeListener() {
  headWidth = window.innerWidth;
  console.log("宽度[resizeListener]----" + headWidth);
  //
  if (headWidth < 768) {
    labelText.value = "手机-" + headWidth;
  } else if (headWidth < 1024) {
    labelText.value = "平板-" + headWidth;
  } else if (headWidth < 1440) {
    labelText.value = "折叠机-" + headWidth;
  } else {
    labelText.value = "桌面电脑-" + headWidth;
  }
}
</script>

<template>
  <div class="top-head-bg">
    <div class="top-head">
      <label class="top-label">{{ labelText }}</label>
    </div>
  </div>
</template>

<style scoped>
.top-head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 横向居中对其 */
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.top-label {
  font-size: 1rem;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 1.5;
}

/* min-width 指定的是，当宽度>=1024px时，需要应用的样式 */
@media (min-width: 1024px) {
  .top-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 横向居中对其 */
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .top-label {
    font-size: 1rem;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 1.5;
  }
}

/* max-width 指定的是，当宽度<=490px时，需要应用的样式 */
@media (max-width: 490px) {
  .top-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 横向居中对其 */
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .top-label {
    font-size: 1rem;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 1.5;
  }
}

/* ******************************************************************* */
/* 浅色模式下显示的背景 */
.top-head-bg {
  background-color: white;
}

/* 深色模式下显示的背景 */
@media (prefers-color-scheme: dark) {
  .top-head-bg {
    background-color: black;
  }
}
</style>
